<template>
  <div id="getPayCode">
    <group class="pay_box">
      <checker v-model="pay_code" type="radio" radio-required default-item-class="pay-item" selected-item-class="pay-item-selected">
        <checker-item :value="pay.id" class="pay_list" v-for="pay in payConfig" :key="pay.id" >
          <img class="pay_icon" :src="pay.img" alt="">
          <span class="pay_text">{{pay.text}}</span>
          <slot v-if="pay.id === 'balance'" name="balance"></slot>
          <i class="weui-icon-checked vux-checklist-icon-checked"></i>
        </checker-item>
      </checker>
    </group>
  </div>
</template>

<script>
import { Group, Checker, CheckerItem } from "vux";
import { isWeChat } from "../../scripts/utils";
import alipay from "../../images/zhifu_icon02.png";
import weixin from "../../images/zhifu_icon03.png";
import balance from "../../images/zhifu_icon01.png";
export default {
  data() {
    return {
      payConfig: [],
      pay_code: null
    };
  },
  /**参数：
   * payCode       默认选中值与value相互对照
   * payList       支付列表(数组)
   */
  props: {
    payCode: {
      //设置一个默认值
      default: function() {
        if (this.payList) {
          //判断是否在微信浏览器中，如果在微信浏览器中默认选中微信否则选中支付宝
          if (isWeChat()) return this.payList[this.payList.length - 1];
          else return "alipay";
        }
      },
      required: false
    },
    payList: {
      required: true
    }
  },
  watch: {
    //新增payCode的watch，监听变更同步到pay_code
    payCode(val, oldVal) {
      this.pay_code = val;
    },
    payList(val, oldVal) {
      val.forEach(p => {
        if (p == "balance") this.setpayConfig(p, balance, "余额支付");
        else if (p == "alipay") this.setpayConfig(p, alipay, "支付宝支付");
        else this.setpayConfig("weixin", weixin, "微信支付");
      });
    }
  },
  updated() {
    if (this.pay_code)
      this.$emit(this.pay_code, false); //子组件对pay_code修改后向父组件发送事件通知
    else this.pay_code = this.payCode;
  },
  components: {
    Group,
    Checker,
    CheckerItem
  },
  methods: {
    //数据重组
    setpayConfig(id, img, text) {
      this.payConfig.push({
        id: id,
        img: img,
        text: text
      });
    }
  }
};
</script>
<style scoped>
#getPayCode .pay_box .pay-item {
  width: 100%;
  padding: 0.2rem 0.35rem;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#getPayCode .pay_box .pay-item:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.pay_icon {
  width: 0.65rem;
  margin-right: 0.25rem;
}
#getPayCode .pay_box .weui-icon-checked:before {
  content: "\EA01";
  color: #c9c9c9;
  display: block;
  background: #fff;
  border-radius: 50%;
  margin: 0 0.2rem 0 0;
}
/**选中时的样式*/
#getPayCode .pay-item-selected .weui-icon-checked:before {
  content: "\EA06";
  color: #09bb07;
}
[class^="weui-icon-"],
[class*=" weui-icon-"] {
  display: inline-block;
  vertical-align: middle;
  font: normal normal normal 14px/1 "weui";
  font-size: 0.5rem;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 50%;
  margin-top: -0.25rem;
  right: 10px;
}
</style>
<style>
#getPayCode .balance {
  position: absolute;
  right: 1.2rem;
}
</style>
